<!--交易管理-->
<template>
  <div class="transaction-container">
    <!-- 搜索栏 -->
    <el-row :gutter="20" class="search-bar">
      <el-col :span="6">
        <el-input 
          v-model="orderNo" 
          placeholder="请输入订单编号"
          clearable
        >
          <template #append>
            <el-button icon="Search" @click="fetchOrders"></el-button>
          </template>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-date-picker 
          v-model="dateRange" 
          type="daterange" 
          range-separator="至" 
          start-placeholder="开始日期" 
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
        ></el-date-picker>
      </el-col>
      <el-col :span="4">
        <el-select v-model="statusFilter" placeholder="全部状态">
          <el-option label="待付款" value="pending"></el-option>
          <el-option label="已发货" value="shipped"></el-option>
          <el-option label="已完成" value="completed"></el-option>
          <el-option label="已取消" value="canceled"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="fetchOrders">查询</el-button>
        <el-button @click="resetFilters">重置</el-button>
      </el-col>
    </el-row>

    <!-- 订单列表 -->
    <el-table 
      :data="orders" 
      style="width: 100%" 
      :loading="loading"
      stripe
    >
      <el-table-column prop="orderNo" label="订单编号" width="180"></el-table-column>
      <el-table-column prop="amount" label="金额" width="120"></el-table-column>
      <el-table-column prop="status" label="状态" width="120">
        <template #default="{ row }">
          <el-tag :type="statusColor[row.status]">{{ row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="创建时间" width="160"></el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button size="small" @click="handleShip(row)">发货</el-button>
          <el-button size="small" @click="handleCancel(row)" v-if="row.status === 'pending'">取消</el-button>
          <el-button size="small" @click="viewDetails(row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页控件 -->
    <el-pagination 
      background 
      layout="prev, pager, next" 
      :total="total"
      :current-page="currentPage"
      @current-change="handlePageChange"
    ></el-pagination>

    <!-- 发货对话框 -->
    <el-dialog 
      v-model="shipDialogVisible" 
      title="确认发货" 
      width="30%"
    >
      <p>请确认是否发货订单：{{ currentOrder.orderNo }}</p>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="shipDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmShip">确认发货</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 取消订单对话框 -->
    <el-dialog 
      v-model="cancelDialogVisible" 
      title="确认取消" 
      width="30%"
    >
      <p>请确认是否取消订单：{{ currentOrder.orderNo }}</p>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelDialogVisible = false">取消</el-button>
          <el-button type="danger" @click="confirmCancel">确认取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';

const orderNo = ref('');
const dateRange = ref([]);
const statusFilter = ref('');
const currentPage = ref(1);
const total = ref(0);
const loading = ref(false);
const shipDialogVisible = ref(false);
const cancelDialogVisible = ref(false);
const currentOrder = reactive({});

// 状态颜色映射
const statusColor = {
  pending: 'warning',
  shipped: 'success',
  completed: 'info',
  canceled: 'danger'
};

// 示例数据
const orders = [
  // ... 填充示例数据 ...
];

// 过滤器应用
const filteredOrders = computed(() => {
  let filtered = orders;
  if (orderNo.value) filtered = filtered.filter(o => o.orderNo.includes(orderNo.value));
  if (dateRange.value.length) {
    const [start, end] = dateRange.value;
    filtered = filtered.filter(o => o.createdAt >= start && o.createdAt <= end);
  }
  if (statusFilter.value) filtered = filtered.filter(o => o.status === statusFilter.value);
  return filtered;
});

// 分页逻辑
const displayedOrders = computed(() => {
  return filteredOrders.value.slice(
    (currentPage.value - 1) * 10,
    currentPage.value * 10
  );
});

// 页面切换
const handlePageChange = (page) => {
  currentPage.value = page;
};

// 重置筛选
const resetFilters = () => {
  orderNo.value = '';
  dateRange.value = [];
  statusFilter.value = '';
  fetchOrders();
};

// 模拟数据获取
const fetchOrders = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    // 实际应调用API获取数据
    total.value = orders.length;
  }, 500);
};

// 处理发货
const handleShip = (row) => {
  currentOrder.orderNo = row.orderNo;
  shipDialogVisible.value = true;
};

const confirmShip = () => {
  // 执行发货逻辑
  ElMessage.success('发货成功');
  shipDialogVisible.value = false;
};

// 处理取消
const handleCancel = (row) => {
  currentOrder.orderNo = row.orderNo;
  cancelDialogVisible.value = true;
};

const confirmCancel = () => {
  // 执行取消逻辑
  ElMessage.error('订单已取消');
  cancelDialogVisible.value = false;
};

// 查看详情
const viewDetails = (row) => {
  console.log('查看订单详情:', row);
};
</script>

<style scoped>
.transaction-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.search-bar {
  margin-bottom: 20px;
}

.el-table {
  margin-bottom: 20px;
}

.el-pagination {
  text-align: center;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>